<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tagcloud - Demo</title>
    <link rel="stylesheet" href="../dist/tagcloud.min.css">
    <style>
        body{
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        #light{
            background: #666;
            color: #fff;
        }
        .box{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 400px;
            margin-top: -300px;
            margin-left: -200px;
        }
        .box.box1{
            left: auto;
            right: 15%;
            margin-left: 0;
        }
        .box2{
            position: fixed;
            top: 50%;
            left: 15%;
            width: 400px;
            height: 400px;
            margin-top: -300px;
        }
    </style>
</head>
<body>
    <h1><a href="http://github.com/mcc108/tagcloud">tagcloud v1.2.0</a></h1>
    <!-- 主题样式切换 -->
    <ul>
        <li><a href="#" onclick="toDefault()">default</a></li>
        <li><a href="#" onclick="toLight()">light</a></li>
    </ul>
    <ul>
        <li><a href="#" onclick="toSingle()">single</a></li>
        <li><a href="#" onclick="toDouble()">double</a></li>
    </ul>
    <div class="content">
        <div class="box">
            <!-- begin -->
            <div class="tagcloud">  <!-- class="tagcloud" - 用途js.css -->
                <a href="#">啦啦啦</a>    <!-- a标签 - 用途css -->
                <a href="#">啦啦</a>
                <a href="#">啦啦啦</a>
                <a href="#">啦啦</a>
                <a href="#">啦啦啦</a>
                <a href="#">啦啦</a>
                <a href="#">啦啦啦</a>
            </div>
            <!-- end -->
        </div>
    </div>
    <script type="text/javascript" src="../dist/tagcloud.min.js"></script>
<script>
    /* 参数列表
     {   参数名: 默认值
         selector: ".tagcloud",  //元素选择器
         fontsize: 16,       //基本字体大小, 单位px
         radius: 60,         //滚动半径, 单位px
         mspeed: "normal",   //滚动最大速度, 取值: slow, normal(默认), fast
         ispeed: "normal",   //滚动初速度, 取值: slow, normal(默认), fast
         direction: 135,     //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)...
         keep: true          //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动
     }
     */
    var tc = tagcloud(); //调用js
    console.log(tc);
    
    //样式切换
    function toDefault(){
        document.body.id = "";
        var tagclouds = document.getElementsByClassName("tagcloud");
        for(var i = 0; i < tagclouds.length; i++){
            tagclouds[i].className = "tagcloud";
        }
    }
    function toLight(){
        document.body.id = "light";
        var tagclouds = document.getElementsByClassName("tagcloud");
        for(var i = 0; i < tagclouds.length; i++){
            tagclouds[i].className = "tagcloud tagcloud-light";
        }
    }
    //单双切换
    function toSingle(){
        var box1 = document.getElementsByClassName("box")[0];
        box1.className = "box";
        document.getElementsByClassName("box2")[0].remove();
    }
    function toDouble(){
        var box1 = document.getElementsByClassName("box")[0];
        box1.className = "box box1";
        if(!!document.getElementsByClassName("box2")[0]){
            return;
        }
        var box2 = box1.cloneNode(true);
        box2.className = "box2";
        document.getElementsByClassName("content")[0].insertBefore(box2);
        var tc = tagcloud(); //再次调用js
        console.log(tc);
    }
</script>
<script src="//congm.in/tongji/code.congm.in.js"></script>
</body>
</html>